<template>
  <div class="project_more_template">
    <el-row class="intro">
      <h2>From the Journal</h2>
      <div class="subtitle">
        Your behind-the-scenes view of the people and stories behind Indiegogo projects
      </div>
    </el-row>
    <el-row :gutter="20" style="background-color: white;">
      <el-col :span="8" v-for="(item, index) in projectList " :key="index" class="panel-container">
        <div class="panel-wrapper">
          <a :href="item.projectLink" class="panel-funding"
             :style="getBGImage(item.projectImage)">
          </a>
          <div class="panel-header">
            {{item.projectTitle}}
          </div>
          <div class="panel-desc">
            {{ item.projectDesc}}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'


  export default {
    data() {
      return {
        restaurants: [],
        state4: '',
        timeout: null,
        projectList: [
          {
            projectTitle: 'UniLid wins $50,000 in flash funding from Ingram Micro',
            projectImage: 'static/img/content1.png',
            projectDesc: 'The results are in for the flash funding contest from Ingram Micro Commerce & Lifecycle Services!',
            projectLink: ''
          },
          {
            projectTitle: 'Robotic Limbs For Amputees',
            projectImage: 'static/img/content2.png',
            projectDesc: 'This teen scientist is augmenting the human body, one robotic limb at a time.',
            projectLink: ''
          },
          {
            projectTitle: 'How Two College Students Found A New Superfood in BeerIt\'s Game Time',
            projectImage: 'static/img/content3.png',
            projectDesc: 'From beer to bread, these entrepreneurs found nutrition in unlikely places.',
            projectLink: ''
          },
        ]
      }
    },
    mounted() {
      //获取用户信息
      // this.getUserInfo();

    },
    props: ['signinUp', 'headTitle', 'goBack'],
    computed: {
      ...mapState([
        'userInfo'
      ]),
    },
    methods: {
      ...mapActions([
        'getUserInfo'
      ]),
      getBGImage(image) {
        return "background-image: url('" + image + "');"
      },
      loginInHandler() {
        this.$emit("loginInHandler")
      },
      signUpHandler() {
        this.$emit("signUpHandler")

      }
    },

  }

</script>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .project_more_template {
    clear: both;
    background-color: white;
    padding: 16px;
    .intro {
      text-align: center;
      h2{
        font-size: 30px;
        font-family: "Benton Sans","Helvetica","sans-serif";
      }
      .subtitle {
        margin-top: 12px;
        margin-bottom: 72px;
        font-size: 14px;
      }
    }
    .panel-container {
      margin-bottom: 26px;
    }
    .panel-wrapper {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      height: 100%;
      .panel-funding {
        background: no-repeat center;
        height: 253px;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        color: #2a2a2a;

      }
      .panel-header {
        margin-top: 16px;
        font-size: 16px;
        color: #2a2a2a;
        line-height: 23px;
      }
      .panel-desc {
        margin-top: 3px;
        color: #6a6a6a;
        font-size: 14px;
        line-height: 20px;
      }

    }

  }

</style>
